<template>
<div>
	<div class="content">
		<div class="header-right" ref="msgF" id="msgF">
		</div>
	</div>
	<div class="bottom-icon">
		<div>
			<div  class="chat-form">
				<input type="text" v-model="firstname" @keydown.enter="clickSubmit" class="chat-input" ref="inp" id="inp">
				<input type="button"
				class="chat-submit"
				value="发送" 
				@click="clickSubmit"
				:class="{actives:varColor}"
				>
			</div>
		</div>
		<ul class="bottom-ul">
			<li class="bottom-li hua-li">
				<span class="iconfont huatong">&#xe626;</span>
			</li>
			<li class="bottom-li tupian">
				<span class="active iconfont">&#xe615;</span>
			</li>
			<li class="bottom-li xiangji">
				<span class="active iconfont">&#xe605;</span>
			</li>
			<li class="bottom-li">
				<span class="active iconfont">&#xe60b;</span>
			</li>
			<li class="bottom-li">
				<span class="active iconfont">&#xe649;</span>
			</li>
			<li class="bottom-li jiahao">
				<span class="active iconfont">&#xe6c9;</span>
			</li>
			
		</ul>
	</div>
	</div>
</template>
<script type="text/javascript">
	export default {
		data(){
			return {
				firstname:"",
				varColor:false,
				sock:this.$sock,//存取全局的socket
				msg_data:"",
				msg:true

			}
		},
				mounted(){
			// 广播的信息
			this.sock.on('broadcastMsg',(name,msgIt)=>{//
						//console.log(msgIt+'non')
						console.log(name+"sss",msgIt+"aaa")
						if(msgIt){
						var oDiv2=document.createElement('div');
						var aMsg=document.getElementById('msgF')
						oDiv2.innerHTML=`<div style="background: #ddd;
						color: #fff;
						float: left;
						padding: 10px 10px;
						border-radius: 15px;
						margin-bottom: 20px;
						margin-left: 20px;
						clear: both;">${msgIt}</div>`;

						aMsg.appendChild(oDiv2);
					}
					});

			//接收返回信息
			this.sock.on('msg_ret',(code,msgMine)=>{
				console.log(msgMine+"555")
						// if(code){
						// 	console.log('信息不能为空')
						// }else{
							if(msgMine){
							var oDiv=document.createElement('div');
							var aMsg=document.getElementById('msgF')
							var oInp=document.getElementById('inp')
							oDiv.innerHTML=`<div style="background: #00d2ff;
						color: #fff;
						float: right;
						padding: 10px 10px;
						border-radius: 15px;
						margin-bottom: 20px;
						margin-right: 20px;
						clear: both;">${msgMine}</div>`
	;
						aMsg.appendChild(oDiv);
						oInp.value="";

						}
						//}
					})

			//和谁讲话，保存otherName
		this.sock.emit('withSpeak',this.$store.state.username,this.$route.params.id)
		this.$store.state.otherName=this.$route.params.id;
	},



		watch:{
			firstname(newValue){
				if(newValue!=""){
					this.varColor=true;
					
				}else{
					this.varColor=false
				}
			}
			},



			methods:{//单纯的数据处理
				clickSubmit(){
					this.msg_data=this.$refs.inp.value
					console.log(this.msg_data)
					this.sock.emit('msgData',this.msg_data)
				},
			}
		}
</script>

<style lang="stylus" scoped>
	.content
		position: absolute;
		bottom: 11%;
		width:100%
	.bottom-icon
		position:fixed
		bottom:0
		background:#ededf5
		width:100%
		.chat-form
			padding: 8px 12px 2px;
			display:flex
			.chat-input
				flex:1
				height:.62rem
				border-radius:30px
				padding-left:15px
			.chat-submit
				margin-left: 4px;
				border-radius: 15px;
				padding: 0 13px;
				background:#b1effe
				color:#f8ffff
			.actives
				background:#00cafc
		.bottom-ul
			overflow:hidden
			display:flex
			.bottom-li 
				float:left
				text-align: center;
				padding-top: 7px;
				color:#989eb4
				flex:1
				font-size: 23px;
				margin-bottom: 2px;
				.iconfont
					font-size: 20px;
				.huatong
					font-size:25px
					padding-top: 2px;
			.tupian
				padding-top: 9px;
			.xiangji
				padding-top: 7px;
			.jiahao
				padding-top: 5px;
			.hua-li
				padding-top: 5px;
				.bottom-word
					margin-top: 3px;
					font-size: 12px;
					color: #ccc;
			.router-link-active
				color:#27bfff
</style>

